<template>
  <div class="login-container">
    <div class="logo">
      <img src="@/assets/1234.jpg" alt="">
    </div>
    <el-form :model="customer" :rules="cusRules" ref="loginForm" label-width="0px" class="loginform_style">
      <el-form-item prop="tel">
        <el-input v-model="customer.tel"  prefix-icon="el-icon-user-solid" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-input v-model="customer.code" prefix-icon="el-icon-lock"  placeholder="请输入验证码"></el-input>
          </el-col>
          <el-col :span="12">
            <el-button type="primary" :disabled="isDis" @click="sendCode">{{btnMessage}}</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item class="btns">
        <el-button type="primary" @click="login">登录</el-button>
        <el-button type="info" >重置</el-button>
        <div align="center">
          <el-link @click="userlogin" >公司人员登录>></el-link>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data(){
      return{
        loginForm:{},
        customer:{},
        btnMessage:'获取验证码',
        totalTime:5,
        isDis:false,
        cusRules:{
          tel:[
            {required:true,message:'请输入手机号',trigger:'blur'},
            {pattern:/^1[3456789]\d{9}$/,message: '请输入正确的手机号格式', trigger:'blur'}
          ],
          code:[
            {required:true,message:'请输入验证码',trigger:'blur'},
            {min:6,max:6,message: '请输入六位数验证码', trigger:'blur'}
          ]
        }
      }
    },
    methods:{
      userlogin: function () {
        this.$router.push('/login');
      },
      sendCode(){
        if(!/^1[3456789]\d{9}$/.test(this.customer.tel)){//如果电话号码格式有误，发出提示
          this.$message.error("输入的手机号有误")
          return
        }
        this.$http.get("/information/customerLogin/sendCode/"+this.customer.tel).then((res)=>{
          if (res.data.success) {
            this.$message.success(res.data.message);
          }else{
            this.$message.error(res.data.message);
          }
        })
        var iv=window.setInterval(()=>{
          var time=this.totalTime--;
          this.btnMessage="请在 "+time+" 秒后重新发送"
          this.isDis=true
          if(time<=0){
            //停止执行定时器，并且改状态为可点击
            window.clearInterval(iv)
            this.totalTime=5
            this.btnMessage="发送验证码"
            this.isDis=false
          }
        },1000)//js定时器
      },
      login(){
        this.$http.post("/information/customerLogin/login",this.customer).then((res)=>{
          if (res.data.success) {
            this.$message.success(res.data.message);
            //登录成功后将用户的信息保存到
            window.sessionStorage.setItem("customer", JSON.stringify(res.data.result.customer));//sessionStorage只能存储字符串
            window.sessionStorage.setItem("linkman",JSON.stringify(res.data.result.linkman))
            window.sessionStorage.setItem("token", res.data.result.token);//存储token
            this.$router.push('/client')
          }else{
            this.$message.error(res.data.message);
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .login-container {
    width: 450px;
    height: 314px;
    background-color: #fff;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;

    .logo {
      width: 130px;
      height: 130px;
      border: 1px solid #eee;
      border-radius: 50%;
      padding: 8px;
      box-shadow: 0 0 10px #eee;
      position: absolute;
      left: 50%;
      transform: translateX(-50%) translateY(-60px);
      background-color: #fff;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }

    .loginform_style {
      padding: 0 20px;
      margin-top: 110px;
    }

    .btns {
      display: flex;
      justify-content: center;
    }
  }
</style>
